<template>
  <div class="flex-container">
    <!--第一排-->
    <div class="flex-child flex-child-first">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="flex-child-card">
            <div class="card-title font-size-el line-height-none">
              <!--卫星频率图-->
              {{
                (cachedSatellite && cachedSatellite.name) ||
                  $t("message.home.freqChartsCard.title")
              }}
              <!--卫星配置的弹出框-->
              <el-popover
                class="no-padding"
                style="float: right"
                placement="bottom"
                width="200"
                trigger="manual"
                v-model="satelliteFreqConfig.visible"
              >
                <!--<p>请选择需要显示的卫星</p>-->
                <!--显示的卫星 隐藏的卫星-->
                <el-select
                  style="margin-bottom: 10px"
                  v-model="satelliteFreqConfig.selectedSatelliteId"
                >
                  <el-option
                    v-for="item in effectiveSatelliteList"
                    :key="item.key"
                    :label="item.label"
                    :value="item.id"
                  />
                </el-select>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="satelliteFreqConfig.visible = false"
                  >
                    <!--取消-->
                    {{ $t("message.common.button.cancel") }}
                  </el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleSatelliteFreqConfigSubmit"
                  >
                    <!--确定-->
                    {{ $t("message.common.button.confirm") }}
                  </el-button>
                </div>
                <el-button
                  slot="reference"
                  type="text"
                  style="padding: 0"
                  @click="handleSatelliteFreqChartConfig"
                >
                  <!--config-->
                  {{ $t("message.home.freqChartsCard.configButton") }}
                </el-button>
              </el-popover>
            </div>
            <div class="card-contain">
              <freq-chart
                :channels="usingChannels"
                :satellite="cachedSatellite"
              />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="card-title font-size-el line-height-none">
              <!--信道利用率-->
              {{ $t("message.home.channelUtility.title") }}
            </div>
            <div class="card-contain">
              <!--业务信道-->
              <div class="progress-div">
                <div class="progress-div-text">
                  {{ $t("message.home.channelUtility.channel1Name") }}
                </div>
                <el-progress
                  class="progress-div-progress progress-traffic"
                  color="#8eff12"
                  :stroke-width="12"
                  :percentage="
                    $store.state.channelUtility.channelUtility.rate_traffic
                  "
                />
              </div>
              <!--tdm信道-->
              <div class="progress-div">
                <div class="progress-div-text">
                  {{ $t("message.home.channelUtility.channel2Name") }}
                </div>
                <el-progress
                  class="progress-div-progress progress-tdm"
                  color="#f5a623"
                  :stroke-width="12"
                  :percentage="
                    $store.state.channelUtility.channelUtility.rate_tdm
                  "
                />
              
              </div>
              <!--aloha信道-->
              <div class="progress-div">
                <div class="progress-div-text">
                  {{ $t("message.home.channelUtility.channel3Name") }}
                </div>
                <el-progress
                  class="progress-div-progress progress-aloha"
                  color="#9a32f6"
                  :stroke-width="12"
                  :percentage="
                    $store.state.channelUtility.channelUtility.rate_aloha
                  "
                />
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="card-title font-size-el line-height-none">
              <!--控制信道信令-->
              {{ $t("message.home.controlChannelSignaling.title") }}
            </div>
            <div class="card-contain">
              <control-signaling :order-count="signalingLineData" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--第二排-->
    <div class="flex-child flex-child-second">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card
            :body-style="{ padding: '0' }"
            class="flex-child-card"
          >
            <!--地图容器-->
            <open-layers />
            <!--<echarts-map-com />-->
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col
              style="height: 50%;box-sizing: border-box"
              :span="24"
            >
              <el-card>
                <div class="card-title font-size-el line-height-none">
                  <!--远端站终端-->
                  {{ $t("message.home.remoteDeviceTable.title") }}
                  <el-button
                    class="no-padding"
                    style="float: right"
                    @click="remoteTerminalDeviceDialogVisible = true"
                    type="text"
                  >
                    <font-awesome-icon icon="ellipsis-v" />
                  </el-button>
                </div>
                <div class="card-contain">
                  <cu-collection
                    :data="collectionCuTable"
                    @click-content="remoteTerminalDeviceDialogVisible = true"
                  />
                </div>
              </el-card>
            </el-col>
            <el-col
              style="height: 50%;padding-top: 20px;box-sizing: border-box"
              :span="24"
            >
              <el-card>
                <div class="card-title font-size-el line-height-none">
                  <!--中心站终端-->
                  {{ $t("message.home.rcuTunnelTable.title") }}
                  <el-button
                    class="no-padding"
                    style="float: right"
                    @click="centerTerminalDeviceDialogVisible = true"
                    type="text"
                  >
                    <font-awesome-icon icon="ellipsis-v" />
                  </el-button>
                </div>
                <div class="card-contain">
                  <rcu />
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!--dialog-->
    <div>
      <!--远端站终端dialog-->
      <el-dialog
        custom-class="remote-dialog"
        v-loading="cuSearchConfig.loading"
        @open="getCuList"
        :title="$t('message.home.remoteDeviceTable.title')"
        top="2%"
        width="1650px"
        :close-on-click-modal="false"
        :visible.sync="remoteTerminalDeviceDialogVisible"
      >
        <div class="remote-dialog-search-div">
          <font-awesome-icon
            style="margin-right: 20px"
            icon="search"
            size="lg"
          />
          <el-input
            style="width: 250px;margin-right: 20px"
            size="small"
            v-model="cuSearchConfig.info"
          />
          <el-button
            @click="handleRemoteTableSearch"
            type="primary"
            size="mini"
          >
            <!--查询按钮-->
            {{ $t("message.home.remoteDeviceTable.search.searchButton") }}
            <el-popover
              placement="bottom-start"
              width="200"
              trigger="hover"
              :content="
                $t('message.home.remoteDeviceTable.search.searchPrompt')
              "
            >
              <font-awesome-icon
                slot="reference"
                style="vertical-align: top"
                :icon="['far', 'question-circle']"
              />
            </el-popover>
          </el-button>
        </div>
        <el-table
          @sort-change="handleCuListSort"
          height="600px"
          class="table-gutter-background"
          header-cell-class-name="my-table-header-cell my-table-header-cell-nopadding"
          cell-class-name="my-table-cell"
          :data="remoteCuDeviceTable"
        >
          <!--终端编号-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.col1')"
            sortable="custom"
            prop="device"
            min-width="160px"
          >
            <template slot-scope="scope">
              <font-awesome-icon
                v-if="!scope.row.collected"
                @click="handleCuCollection(scope.$index, scope.row.id)"
                style="color: #5098ef;cursor: pointer"
                :icon="['far', 'star']"
              />
              <font-awesome-icon
                v-else
                @click="handleCuCollectionCancel(scope.$index, scope.row.id)"
                style="color: #5098ef;cursor: pointer"
                :icon="['fas', 'star']"
              />
              <span style="margin-left: 5px">
                {{ scope.row.device }}
              </span>
            </template>
          </el-table-column>
          <!--地球站名称-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.colDialog1')"
            prop="station_name"
            min-width="110px"
          />
          <!--状态-->
          <!--:filters="[{ text: $t('message.define.cu.state.0'), value: $t('message.define.cu.state.0') }, { text: $t('message.define.cu.state.1'), value: $t('message.define.cu.state.1') }, { text: $t('message.define.cu.state.2'), value: $t('message.define.cu.state.2') }]"-->
          <!--:filter-method="filterTag"-->
          <!--filter-placement="bottom-end"-->
          <el-table-column
            min-width="150px"
            :label="$t('message.home.remoteDeviceTable.col2')"
            prop="statename"
          >
            <template slot-scope="scope">
              <font-awesome-icon
                :style="{ color: scope.row.color }"
                icon="circle"
              />
              <span style="margin-left: 5px">
                {{ scope.row.statename }}
              </span>
            </template>
          </el-table-column>
          <!--省份-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.colDialog6')"
            prop="city"
            min-width="115px"
          />
          <!--坐标-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.col3')"
            prop="coords"
            min-width="195px"
          >
            <template slot-scope="scope">
              <div class="remote-table-snr-cell">
                <span>{{ scope.row.coords }}</span>
                <el-button
                  v-if="$store.state.is_staff"
                  type="text"
                  style="padding: 0 15px 0 0"
                  @click="handleStationCoordsModify(scope.row)"
                >
                  <img
                    style="width: 1em;margin-left: 5px"
                    src="@/assets/common/edit.png"
                  >
                </el-button>
              </div>
            </template>
          </el-table-column>
          <!--电话号码-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.col4')"
            prop="number"
          />
          <!--终端类型-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.col5')"
            prop="unit_type"
            min-width="150px"
          >
            <template slot-scope="scope">
              <span>{{
                $t("message.define.cu.unit_type")[scope.row.unit_type]
              }}</span>
            </template>
          </el-table-column>
          <!--TDM信噪比-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.colDialog4')"
            prop="snr1"
            min-width="155px"
          >
            <template slot-scope="scope">
              <div class="remote-table-snr-cell">
                <span>{{ scope.row.snr1 }}</span>
                <el-button
                  class="refresh-button"
                  style="padding: 0 15px 0 0;"
                  type="text"
                  @click="handleSnrRefresh(scope.row)"
                >
                  <font-awesome-icon icon="sync-alt" />
                </el-button>
              </div>
            </template>
          </el-table-column>
          <!--业务信噪比-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.colDialog5')"
            prop="snr2"
            min-width="170px"
          >
            <template slot-scope="scope">
              <div class="remote-table-snr-cell">
                <span>{{ scope.row.snr2 }}</span>
                <el-button
                  type="text"
                  style="padding: 0 15px 0 0"
                  @click="handleSnrRefresh(scope.row)"
                >
                  <font-awesome-icon
                    class="refresh-button"
                    icon="sync-alt"
                  />
                </el-button>
              </div>
            </template>
          </el-table-column>
          <!--发送频点-->
          <el-table-column
            :label="$t('message.home.remoteDeviceTable.colDialog2')"
            prop="sendFreqFormat"
            min-width="150px"
          />
          <!--接收频点-->
          <!--操作-->
          <el-table-column
            v-if="$store.state.is_staff"
            fixed="right"
            min-width="220px"
            :label="$t('message.home.remoteDeviceTable.col6')"
          >
            <template slot-scope="scope">
              <el-button-group>
                <!--退网-->
                <el-button
                  :disabled="scope.row.state === 0"
                  style="padding: 5px"
                  @click.stop="controlRemoteCu(scope.row, 'logout')"
                  type="primary"
                  size="mini"
                >
                  {{ $t("message.home.remoteDeviceTable.button1") }}
                </el-button>
                <!--入网-->
                <el-button
                  :disabled="scope.row.state === 0"
                  style="padding: 5px"
                  @click.stop="controlRemoteCu(scope.row, 'relogin')"
                  type="primary"
                  size="mini"
                >
                  {{ $t("message.home.remoteDeviceTable.button2") }}
                </el-button>
                <!--建链-->
                <!--<el-button-->
                <!--  :disabled="scope.row.state === 0"-->
                <!--  style="padding: 5px"-->
                <!--  @click.stop="handleCuCallBridge(scope.row)"-->
                <!--  type="primary"-->
                <!--  size="mini"-->
                <!--&gt;-->
                <!--  {{ $t('message.home.remoteDeviceTable.button3') }}-->
                <!--</el-button>-->
                <!--拆链-->
                <!--<el-button-->
                <!--  :disabled="scope.row.state === 0"-->
                <!--  style="padding: 5px"-->
                <!--  @click.stop="handleCuCallBridgeEnd(scope.row)"-->
                <!--  type="primary"-->
                <!--  size="mini"-->
                <!--&gt;-->
                <!--  {{ $t('message.home.remoteDeviceTable.button4') }}-->
                <!--</el-button>-->
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSearchCuSizeChange"
          @current-change="handleSearchCuPageChange"
          class="pagination-position"
          background
          :page-sizes="[10, 20, 50]"
          :page-size="cuSearchConfig.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="$store.state.cu.cuCount"
        />
      </el-dialog>
      <!--rcu终端dialog-->
      <el-dialog
        :title="$t('message.home.rcuTunnelTable.title')"
        top="2%"
        width="1300px"
        :close-on-click-modal="false"
        :visible.sync="centerTerminalDeviceDialogVisible"
      >
        <!--rcu tunnel table-->
        <el-table
          height="700px"
          class="table-gutter-background"
          header-row-class-name="test-table-row-class"
          header-cell-class-name="my-table-header-cell my-table-header-cell-nopadding"
          cell-class-name="my-table-cell"
          :data="tunnelList"
        >
          <!--空数据时slot-->
          <div slot="empty">
            <div class="line-height-base">
              暂无RCU的信息
            </div>
          </div>
          <!--通道编号-->
          <el-table-column
            :label="$t('message.home.rcuTunnelTable.id')"
            sortable
            prop="name"
            min-width="155px"
          />
          <!--状态名称-->
          <el-table-column
            min-width="150px"
            :label="$t('message.home.rcuTunnelTable.statename')"
            prop="statename"
            :filters="[{ text: $t('message.define.rcuTunnel.state.0'), value: $t('message.define.rcuTunnel.state.0') }, { text: $t('message.define.rcuTunnel.state.1'), value: $t('message.define.rcuTunnel.state.1') }]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <font-awesome-icon
                :style="{color: scope.row.color}"
                icon="circle"
              />
              <span style="margin-left: 5px">
                {{ scope.row.statename }}
              </span>
            </template>
          </el-table-column>
          <!--类型-->
          <el-table-column
            :label="$t('message.home.rcuTunnelTable.typeName')"
            prop="typeName"
            min-width="130px"
          />
          <!--通信速率-->
          <el-table-column
            :label="$t('message.home.rcuTunnelTable.speed')"
            prop="speed"
            min-width="130px"
          />
          <!--工作频点（下行）-->
          <el-table-column
            :label="$t('message.home.rcuTunnelTable.frequency')"
            prop="frequencyFormat"
            min-width="160px"
          />
          <!--实时流量-->
          <el-table-column
            :label="$t('message.home.rcuTunnelTable.flow')"
            prop="flow"
            min-width="130px"
          />
        </el-table>
      </el-dialog>
      <!--修改地球站经纬度-->
      <el-dialog
        :title="$t('message.home.changeStationCoordsDialog.title')"
        width="15%"
        :visible.sync="station.visible"
      >
        <el-form
          ref="stationForm"
          :model="station.form"
          :rules="station.rules"
          label-width="100px"
        >
          <!--地球站-->
          <el-form-item
            style="text-align: left"
            :label="$t('message.home.changeStationCoordsDialog.form.label1')"
          >
            <span>{{ station.form.station_name }}</span>
          </el-form-item>
          <!--经度-->
          <el-form-item
            :label="$t('message.home.changeStationCoordsDialog.form.label2')"
            prop="longitude"
          >
            <el-input v-model="station.form.longitude" />
          </el-form-item>
          <!--纬度-->
          <el-form-item
            :label="$t('message.home.changeStationCoordsDialog.form.label3')"
            prop="latitude"
          >
            <el-input v-model="station.form.latitude" />
          </el-form-item>
          <el-form-item class="button-form-item">
            <el-button
              :loading="station.loading"
              @click="submitForm()"
              type="primary"
            >
              <!--确定-->
              {{ $t("message.common.button.confirm") }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--终端建链dialog-->
      <el-dialog
        :title="$t('message.home.cuCallBridge.title')"
        width="15%"
        :visible.sync="cuCallBridge.visible"
      >
        <el-form
          ref="cuCallBridgeForm"
          :model="cuCallBridge.form"
          :rules="cuCallBridge.rules"
          label-width="100px"
        >
          <!--发送速率-->
          <el-form-item
            :label="$t('message.home.cuCallBridge.form.label1')"
            prop="speed_send"
          >
            <el-select v-model="cuCallBridge.form.speed_send">
              <el-option
                v-for="item in cuCallBridge.form.speedOption"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!--接收速率-->
          <el-form-item
            :label="$t('message.home.cuCallBridge.form.label2')"
            prop="speed_receive"
          >
            <el-select v-model="cuCallBridge.form.speed_receive">
              <el-option
                v-for="item in cuCallBridge.form.speedOption"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!--提交-->
          <el-form-item class="button-form-item">
            <el-button
              :loading="cuCallBridge.loading"
              @click="handleCuCallBridgeSubmit()"
              type="primary"
            >
              <!--确定-->
              {{ $t("message.common.button.confirm") }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import OpenLayers from '@/components/OpenLayers.vue'
// import EchartsMapCom from '@/components/EchartsMapCom.vue'
import FreqChart from '@/components/FreqChart.vue'
import ControlSignaling from '@/components/ControlSignaling.vue'
import CuCollection from '@/components/device/cu/CuCollection.vue'
import Rcu from '@/components/device/rcu/Rcu.vue'
export default {
  name: 'Home',

  components: {
    OpenLayers,
    // EchartsMapCom,
    FreqChart,
    ControlSignaling,
    CuCollection,
    Rcu
  },

  watch: {
    channelUtility: {
      deep: true,
      async handler (data) {
        for (let key in data) {
          if (data[key] >= 90) {
            await this.$notify({
              title: this.$t('message.notify.title.prompt'),
              message: `${this.$t('message.notify.channelUtilityFull', {
                key
              })}`,
              duration: 6000,
              type: 'warning',
              position: 'bottom-right'
            })
          }
        }
      }
    }
  },

  computed: {
    cachedSatellite () {
      return this.$store.state.satellite.cachedSatellite
    },
    effectiveSatelliteList () {
      let res = []
      let effectiveSatelliteList = this.$store.state.satellite
        .effectiveSatelliteList
      for (let i in effectiveSatelliteList) {
        res.push({
          key: i,
          id: effectiveSatelliteList[i].id,
          label: effectiveSatelliteList[i].name
        })
      }
      return res
    },
    usingChannels () {
      return [
        ...this.$store.getters.getCtrlFreqSegmentChartData,
        ...this.$store.getters.getTafficFreqSegmentChartData
      ]
        .filter(item => item.satellite === this.cachedSatellite.id)
        .map(item => {
          return {
            name: item.satellite_name,
            type: item.type,
            value: [0, item.down_freq_begin, item.down_freq_end, item.color],
            itemStyle: {
              normal: {
                color: item.color
              }
            },
            tooltip: {
              formatter: params => {
                // 类型
                // 下行起始频点
                // 下行终止频点
                return `${params.name}<br />
                      ${this.$t(
    'message.home.freqChartsCard.chart.tooltip.type'
  )}：${item.type}<br />
                      ${this.$t(
    'message.home.freqChartsCard.chart.tooltip.downFreqBegin'
  )}：${this.$service.miliFormat(
  item.down_freq_begin
)} KHz<br />
                      ${this.$t(
    'message.home.freqChartsCard.chart.tooltip.downFreqEnd'
  )}：${this.$service.miliFormat(item.down_freq_end)} KHz`
              }
            }
          }
        })
    },
    // 控制信令数量图
    signalingLineData () {
      return this.$store.state.ctrlCount.ctrlCount
    },
    // collection cu
    collectionCuTable () {
      return this.$store.getters.getCuOfCollection.map(item => {
        return {
          ...item,
          coords: `${item.longitude},${item.latitude}`,
          statename: this.$t(`message.define.cu.state.${item.state}`),
          color: this.$t(`message.define.cu.state.color.${item.state}`)
        }
      })
    },
    remoteCuDeviceTable () {
      return this.$store.getters.getCuOfRemote.map(item => {
        return {
          ...item,
          coords: `${item.longitude},${item.latitude}`,
          sendFreq: item.tx_freq / 1000,
          sendFreqFormat: this.$service.miliFormat(item.tx_freq / 1000),
          statename: this.$t(`message.define.cu.state.${item.state}`),
          color: this.$t(`message.define.cu.state.color.${item.state}`),
          snr1: item.snr1,
          snr2: item.snr2
        }
      })
    },
    // rcu tunnel list
    tunnelList () {
      return this.$store.getters.rcuTunnelList.map(tunnelItem => {
        let state = tunnelItem.frequency === 0 ? 0 : 1
        return {
          ...tunnelItem,
          statename: this.$t(`message.define.rcuTunnel.state.${state}`),
          color: this.$t(`message.define.rcuTunnel.stateColor.${state}`),
          typeName: this.$t(`message.define.controlChannel.kind.${tunnelItem.type}`),
          frequencyFormat: this.$service.miliFormat(tunnelItem.frequency / 1000)
        }
      })
    },

    channelUtility () {
      return this.$store.state.channelUtility.channelUtility
    }
  },

  data () {
    return {
      remoteTerminalDeviceDialogVisible: false,
      centerTerminalDeviceDialogVisible: false,
      // 卫星频率图配置
      satelliteFreqConfig: {
        loading: false,
        visible: false,

        selectedSatelliteId: null
      },
      // cuListDialog查询属性
      cuSearchConfig: {
        loading: false,

        ordering: 'device',
        page: 1,
        pageSize: 10,

        info: ''
      },
      station: {
        visible: false,
        loading: false,
        form: {
          id: '',
          longitude: '',
          latitude: ''
        },
        rules: {
          longitude: [
            // 请输入经度
            {
              required: true,
              message: this.$t(
                'message.home.changeStationCoordsDialog.form.rules.err1'
              ),
              trigger: 'blur'
            }
          ],
          latitude: [
            // 请输入纬度
            {
              required: true,
              message: this.$t(
                'message.home.changeStationCoordsDialog.form.rules.err2'
              ),
              trigger: 'blur'
            }
          ]
        }
      },

      cuCallBridge: {
        loading: false,
        visible: false,

        form: {
          id: '',

          speedOption: [],

          speed_send: '',
          speed_receive: ''
        },
        rules: {
          speed_send: [
            // 请选择发送速率
            {
              required: true,
              message: this.$t('message.home.cuCallBridge.form.rules.err1'),
              trigger: 'change'
            }
          ],
          speed_receive: [
            // 请选择接收速率
            {
              required: true,
              message: this.$t('message.home.cuCallBridge.form.rules.err2'),
              trigger: 'change'
            }
          ]
        }
      }
    }
  },

  mounted () {
    let self = this
    self.$nextTick(() => {
      self.initTable()
      self.initFreqLine()
    })
  },

  methods: {
    async initTable () {
      let self = this
      self.$store.dispatch(`getCuList`)
      self.$store.dispatch(`getCollectionCuList`)
      // self.$store.dispatch(`getCcuListNcp`)
    },
    async initFreqLine () {
      let self = this
      await self.$store.dispatch(`getEffectiveSatelliteList`)
      self.$store.dispatch(`getUsingCtrlChannel`)
      self.$store.dispatch(`getUsingTrafficChannel`)
      self.$store.dispatch(`getUsingSubscribeFreqSegment`)
    },
    handleSatelliteFreqChartConfig () {
      let self = this
      self.satelliteFreqConfig.selectedSatelliteId =
        JSON.parse(localStorage.getItem('cachedSatelliteId')) || ''
      self.satelliteFreqConfig.visible = true
    },
    handleSatelliteFreqConfigSubmit () {
      let self = this
      localStorage.setItem(
        'cachedSatelliteId',
        JSON.stringify(self.satelliteFreqConfig.selectedSatelliteId)
      )
      self.$store.commit(
        'setCachedSatellite',
        self.$store.state.satellite.effectiveSatelliteList
      )
      self.satelliteFreqConfig.visible = false
    },
    // culist的分页
    async getCuList () {
      let self = this
      try {
        self.cuSearchConfig.loading = true
        await self.$store.dispatch(`getCuList`, {
          ordering: self.cuSearchConfig.ordering,

          page: self.cuSearchConfig.page,
          pageSize: self.cuSearchConfig.pageSize,

          info: self.cuSearchConfig.info
        })
      } finally {
        self.cuSearchConfig.loading = false
      }
    },
    handleRemoteTableSearch () {
      let self = this
      self.cuSearchConfig.page = 1
      self.getCuList()
    },
    handleSnrRefresh (row) {
      let self = this
      self.$store.dispatch(`axios`, {
        method: 'get',
        url: `/api/abs/ncp/cu_snr/${row.id}/`
      })
    },
    handleCuCollection (index, id) {
      let self = this
      // 缓存中的收藏cu的ID
      let cuIdList = JSON.parse(localStorage.getItem('cuIdList')) || []
      if (cuIdList.find(item => item === id)) {
        // 该终端已收藏，无法重复添加
        self.$message.error(self.$t('message.home.cuCollection.message.err1'))
        return
      }
      cuIdList.push(id)
      localStorage.setItem('cuIdList', JSON.stringify(cuIdList))
      self.$message.success(self.$t('message.common.info.addSuccess'))
      // set culist的collect属性
      self.$store.commit('setCuListCollected', {
        index: index,
        collected: true
      })
      // 重新读取首页的culist
      self.$store.dispatch('getCollectionCuList', cuIdList)
    },
    async handleCuCollectionCancel (index, id) {
      let self = this
      try {
        // 确定要取消收藏
        await self.$confirm(
          self.$t('message.home.cuCollection.message.confirm1'),
          self.$t('message.common.label.prompt'),
          {
            confirmButtonText: self.$t('message.common.button.confirm'),
            cancelButtonText: self.$t('message.common.button.cancel'),
            type: 'warning'
          }
        )
      } catch (e) {
        return
      }
      // 缓存中的收藏cu的ID
      let cuIdList = JSON.parse(localStorage.getItem('cuIdList')) || []
      for (let key in cuIdList) {
        if (cuIdList[key] === id) {
          cuIdList.splice(key, 1)
        }
      }
      localStorage.setItem('cuIdList', JSON.stringify(cuIdList))
      self.$message.success(self.$t('message.common.info.deleteSuccess'))
      self.$store.commit('setCuListCollected', {
        index: index,
        collected: false
      })
      // 重新读取首页的culist
      self.$store.dispatch('getCollectionCuList', cuIdList)
    },
    // 修改地球站经纬度
    handleStationCoordsModify (row) {
      let self = this
      self.station.form.id = row.station
      self.station.form.station_name = row.station_name
      self.station.form.longitude = row.longitude
      self.station.form.latitude = row.latitude
      self.station.visible = true
    },
    handleCuListSort ({ prop, order }) {
      let self = this
      self.cuSearchConfig.ordering = `${
        order === 'descending' ? '-' : ''
      }${prop}`
      self.getCuList()
    },
    handleSearchCuSizeChange (size) {
      let self = this
      self.cuSearchConfig.pageSize = size
      self.cuSearchConfig.page = 1
      self.getCuList()
    },
    handleSearchCuPageChange (page) {
      let self = this
      self.cuSearchConfig.page = page
      self.getCuList()
    },
    // table的标签过滤方法
    filterTag (value, row) {
      return row.statename === value
    },
    controlCenterCu (row, operate) {
      let self = this
      self.$store.dispatch('axios', {
        method: 'post',
        url: `/api/abs/ncp/cu_command/${row.id}/${operate}/`
      })
    },
    async submitForm () {
      let self = this
      await self.$refs['stationForm'].validate()
      try {
        self.station.loading = true
        await self.$store.dispatch('axios', {
          method: 'patch',
          url: `/api/abs/devices/stations/${self.station.form.id}/`,
          data: {
            longitude: self.station.form.longitude,
            latitude: self.station.form.latitude
          }
        })
        self.station.visible = false
      } finally {
        self.station.loading = false
      }
      // 修改成功
      self.$message.success(self.$t('message.common.info.modifySuccess'))
      // await self.$store.dispatch('getCuList')
      await self.getCuList()
      self.$store.commit('changeStationCoords', {
        ...self.station.form,
        station_id: self.station.form.id
      })
      // console.log({ ...self.station.form, station_id: self.station.form.id })
    },
    controlRemoteCu (row, operate) {
      let self = this
      self.$store.dispatch('axios', {
        method: 'post',
        url: `/api/abs/ncp/cu_command/${row.id}/${operate}/`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.flex-container {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}
.flex-child {
  padding: 20px;
  .el-row,
  .el-col,
  .el-card {
    height: 100%;
  }
}
.flex-child-first {
  overflow: hidden;
  box-sizing: border-box;
  flex: 0 0 180px;
}
.flex-child-second {
  padding-top: 0;
  flex: 1 0 400px;
}
.progress-div {
  height: 33%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  .progress-div-text {
    /*padding-left: 20px;*/
    font-size: 16px;
    flex: 1 0 auto;
  }
  .progress-div-progress {
    padding-left: 10px;
    flex: 0 1 18em;
  }
}
.remote-dialog-search-div {
  margin: 10px 0;
  text-align: left;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}
.remote-table-snr-cell {
  display: flex;
  justify-content: space-between;
  flex-flow: nowrap;
  align-items: center;
  .refresh-button {
    display: none;
  }
}
.remote-table-snr-cell:hover {
  .refresh-button {
    display: inline-block;
  }
}
@media screen and (max-width: 1400px) {
  .flex-container {
    overflow: auto;
  }
}
</style>
